<template>
    <div class="u_topmenu">
        <div class="xw-mask-left"></div>
        <div class="slider_wrap line">
            <ul class="u_c_items">
                <li class="on"><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>
                <li><a href="#">交换-----</a></li>		        
            </ul>
        </div>
        <div class="xw-mask-right">

        </div>
    </div>
</template>

<script>
 export default {
    name: 'swipeTab',

    data() {
      return {
        sheetVisible: false,
        selected:'1'
      };
    },

    methods: {

    },
    components: {

    },
    mounted:function(){

    }
  };
</script>
<style scoped>
    a{text-decoration: none;}
    .u_topmenu{height:3rem;width:100%;position:relative;background:#fff;padding-left:.2rem;padding-right:.2rem;box-sizing:border-box;z-index:1;opacity:1;top:0;border-bottom: #eee solid 1px;}
    .u_topmenu .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch}
    .u_topmenu .slider_wrap.line li{display:inline-block;height:3rem;width:16.6666%;overflow:hidden;position:relative}
    .u_topmenu .slider_wrap.box{overflow:hidden;width:100%}
    .u_topmenu .slider_wrap.box li{float:left;width:14.2857%;height:3rem}
    .u_topmenu .slider_wrap::-webkit-scrollbar{display:none}
    .u_topmenu .u_c_items{white-space:nowrap}
    .u_topmenu .u_c_items a{color:#555;line-height:3rem;white-space:nowrap;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer;font-size: .9rem;}
    .u_topmenu .u_c_items a:active{color:#f33}
    .u_topmenu .u_c_items .on a,.u_topmenu .u_c_items .on a:visited,.u_topmenu .u_c_items .on a:link,.u_topmenu .u_c_items .on a:hover,.u_topmenu .u_c_items .on a:focus{color:#f33;font-size:1rem;}
    .u_topmenu .u_c_items .on{border-bottom: #ea4821 solid 2px;}
    .xw-mask-left {
        width: 2rem;
        height:3rem;
        position: absolute;
        left: 0;
        top: 0;
        background: -webkit-linear-gradient(right,rgba(255,255,255,0),#fff);
        background:linear-gradient(right,rgba(255,255,255,0),#fff);
    }
    .xw-mask-right {
        width: 2rem;
        height:3rem;
        position: absolute;
        right: 0;
        top: 0;
        background: -webkit-linear-gradient(left,rgba(255,255,255,0),#fff);
        background:linear-gradient(left,rgba(255,255,255,0),#fff);
    }
</style>
